<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name=viewport content="width=device-width,initial-scale=1">
		<title>墨盒详情</title>
		<link rel="stylesheet" href="${ctxStatic}/jiujiudevice/css/public.css" />
		<script type="text/javascript" src="${ctxStatic}/jiujiudevice/js/jquery-1.9.1.min.js"></script>
		<style>
table {
	width: 100%;
	line-height: 20px;
	color: #666666;
	padding-left: 15px;
}

.title {
	font-size: 11px;
}

td {
	border-bottom: 1px #EEEEEE dashed;
}

.context {
	font-size: 12px;
	color: #999999;
}

.list {
	line-height: 20px;
	background: #FFFFFF;
	margin-bottom: 16px;
	border-top: 1px #eee solid;
	display: flex;
	justify-content: space-around;
	padding: 10px 0;
	color: #666666;
}

.list li {
	text-align: center;
	border-right: 1px #eee solid;
	flex: 1;
}

.list li:last-child {
	border: 0;
}

.list li p:last-child {
	color: #00DA81;
}
</style>

	</head>

	<body style="background: #f6f6f6;">
		<div class="p-top" id="title"  style="margin-bottom:10px;">
			<p class="p-title" style="font-size: 16px;">${jiuDevice.companyName}</p>
			<div class="p-desc">
				<p>设备名称 ${jiuDevice.name}</p>
				<p>设备SN ${jiuDevice.sn}</p>
			</div>
		</div>
			<!-- 墨盒总计开始 -->
	<!-- 如果是加墨设备显示 1-加墨设备 0-开关设备 -->
	   
		<div class="p-top"  style="margin-bottom:10px;">
			<p class="p-title h2  box flex-between" id="xiangqing"
			style="border-bottom: 1px #eee solid; font-size: 16px; padding-bottom: 6px;">
			<span>墨盒总计</span>
			</p>
			<div>
				<div id="deviceContent">
				<!-- <table>
					<tr class="title">
						<td>路线</td>
						<td>墨盒</td>
						<td>单价</td>
						<td>使用重量</td>	
						<td>消费金额</td>					
					</tr>
					<tr class="context">
						<td>1路</td>
						<td style="color:#DC0511;"><span style="width: 10px; height: 10px; background: #DC0511; display: inline-block; margin-right: 6px;"></span>红色</td>
						<td>10g</td>						
					</tr>
					<tr class="context">
						<td>2路</td>
						<td style="color:blue;"><span style="width: 10px; height: 10px; background: blue; display: inline-block; margin-right: 6px;"></span>红色</td>
						<td>10g</td>	
					</tr>
					
				</table> -->
			</div>						
		</div>
		<p class="p-moeny">
			<span>共计</span> <span>${orderLog.inkMoney}元</span>
		</p>
	</div>
	<!-- 墨盒总计结束-->
	 
	 
		<div class="conent">
		</div>
		
		
		<script type="text/javascript">
		Date.prototype.Format = function(fmt) { //author: meizz 
			var o = {
				"M+" : this.getMonth() + 1, //月份 
				"d+" : this.getDate(), //日 
				"h+" : this.getHours(), //小时 
				"m+" : this.getMinutes(), //分 
				"s+" : this.getSeconds(), //秒 
				"q+" : Math.floor((this.getMonth() + 3) / 3), //季度 
				"S" : this.getMilliseconds()
			//毫秒 
			};
			if (/(y+)/.test(fmt))
				fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "")
						.substr(4 - RegExp.$1.length));
			for ( var k in o)
				if (new RegExp("(" + k + ")").test(fmt))
					fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k])
							: (("00" + o[k]).substr(("" + o[k]).length)));
			return fmt;
		}
		function getLocalTime(nS) {
			var date = new Date(nS);
			return date.Format("hh:mm:ss", date);
		}
		function sysnt(){
			$.ajax({
				type:'POST',
				url : "${ctxFront}/jiujiudevice/fenduanData",
				data:{
					sn:"${jiuDevice.sn}",
					orderNo : "${orderLog.orderNo}"
				},
				success:function(data){
					var useState = '<div class="p-top"><p class="p-title  box flex-between" ><span>墨盒明细</span></p></div>';
					var json = JSON.parse(data);
					if(json.r){
						for (var i = 0; i < json.l.length; i++) {
							//八路的数据
							var dataList = json.l[i].datalist;
							useState += '<div class="p-top"  style="margin-bottom:10px;">';
							//遍历每组八路的数据
							$.each(dataList,function(index,items){
								if(index > 0){
									useState += '<div style="margin-top: 10px;">';
								}else{
									useState += '<div>';
								}
								useState += '<p class="p-title box flex-between"><span>时间 '+getLocalTime(items.createTime)+'</span><span>';
								var inkStatus = items.inkStatus;
								var snm = '';
								if (inkStatus == 0) {
									snm = '<i style="color: #00DA81;">使用';
								} else {
									snm = '<i style="color: #DC0511;">加墨';
								}
								useState += snm+'</i></span></p><div id="deviceContent">';
								
								if(inkStatus == 0){
									//八路的各个合计
									var array =new Array();
		                            var rountList = json.l[i].routeList;
		                            $.each(rountList,function(index,n){
		                            	array.push(n);
									});
		                           
									useState += '<table><tr class="title"><td>路线</td><td>墨盒</td><td>单价</td><td>初始重量</td><td>当前重量</td><td>使用重量</td><td>消费金额</td></tr><tr class="title"><td>（路）</td><td>（色）</td><td>（元/g）</td><td>（g）</td><td>（g）</td><td>(g)</td><td>(元)</td></tr>';
									//这里的datalist是8路的数据
									var inkMessage = JSON.parse(items.inkMessage);
									
									
								    $.each(inkMessage,function(index,item){
								    	
								    	useState += '<tr class="context"><td>'+item.id+'路<td>'+item.flag+'</td><td>'+item.price+'</td><td>'+item.preValue+'</td><td>'+item.value+'</td><td>'+item.useValue+'</td><td>'+array[index]+'</td></tr>';
								    });
								    useState += '</table></div></div>';
								    //墨盒数据结束
								}else{
									useState += '</div></div></div>';
								}
								
								if(inkStatus == 0){
									  //八路合计开始
									
											//八路的总计
				                            var useMoney = json.l[i].submoney;
				                           if(isNaN(useMoney)){
				                            	
				                           }else{
												useState += '<p class="p-moeny h2"><span>合计</span> <span>'+useMoney+'元</span></p></div></div>';  
				                           }
										}
							});
					 }	
					}else{
						useState = '<div class="p-top" style="width:100%;height:380px;line-height:380px;font-size:15px"><div  style="text-align:center;color:#666666;vertical-align:middle;">暂时没有数据</div></div>';
					}
					$(".conent").html(useState);
				}
			})
		}
		$(function(){
			var log = JSON.parse('${orderLog.inkMessage}');
			var str = '';
			if (log.length > 0) {
				str += '<table><tr class="title"><td>路线</td><td>墨盒</td><td>单价</td><td>总使用量</td><td>总消费金额</td></tr><tr class="title"><td>(路)</td><td>(色)</td><td>(元/g)</td><td>(g)</td><td>(元)</td></tr>';
				$.each(log, function(index, n) {
					str += '<tr class="context"><td>'+ n.id +'路</td><td>'+ n.flag +'</td><td>' + n.price+ '</td><td>' + n.useValue + '</td><td>' + n.useMoney+ '</td></tr>'
				})
				str += '</table>';
			}
			$("#deviceContent").html(str);
			sysnt();
		})
		</script>
	</body>

</html>